<script lang="ts">
import { updateArchives } from '$gql/Mutations';
import { archiveQuery } from '$gql/Queries';
import { Direction, Layout, type FullArchiveFragment, type PageFragment } from '$gql/graphql';
import { initReaderContext } from '$lib/Reader';
import { initSelectionContext } from '$lib/Selection';
import { setTabContext } from '$lib/Tabs';
import { toastFinally } from '$lib/Toasts';
import Guard from '$lib/components/Guard.svelte';
import Head from '$lib/components/Head.svelte';
import Titlebar from '$lib/components/Titlebar.svelte';
import Grid from '$lib/containers/Grid.svelte';
import Gallery from '$lib/gallery/Gallery.svelte';
import PageView from '$lib/reader/PageView.svelte';
import Reader from '$lib/reader/Reader.svelte';
import ArchiveDelete from '$lib/tabs/ArchiveDelete.svelte';
import ArchiveDetails from '$lib/tabs/ArchiveDetails.svelte';
import ArchiveEdit from '$lib/tabs/ArchiveEdit.svelte';
import Tab from '$lib/tabs/Tab.svelte';
import Tabs from '$lib/tabs/Tabs.svelte';
import { getContextClient } from '@urql/svelte';
import type { PageData } from './$types';
export let data: PageData;
const client = getContextClient();
const reader = initReaderContext();
setTabContext({
tabs: {
details: { title: 'Details' },
edit: { title: 'Edit' },
deletion: { title: 'Delete' }
},
current: 'details'
});
$: result = archiveQuery(client, { id: data.id });
function updateCover(event: CustomEvent<number>) {
updateArchives(client, { ids: archive.id, input: { cover: { id: event.detail } } }).catch(
toastFinally
);
}
let archive: FullArchiveFragment;
$: $result, update();
function update() {
if (!$result.stale && $result.data?.archive.__typename === 'FullArchive') {
archive = structuredClone($result.data.archive);
$reader.pages = archive.pages;
}
}
const selection = initSelectionContext<PageFragment>('Page', (p) => p.path);
$selection.selectable = (p) => p.comicId === null;
$: if (archive) {
$selection.view = archive.pages;
}
</script>
<Head section="Archive" title={archive?.name} />
{#if archive}
<Grid>
<header>
<Titlebar title={archive.name} />
</header>
<aside>
<Tabs>
<Tab id="details">
<ArchiveDetails {archive} />
</Tab>
<Tab id="edit">
<ArchiveEdit {archive} />
</Tab>
<Tab id="deletion">
<ArchiveDelete {archive} />
</Tab>
</Tabs>
</aside>
<main class="overflow-auto">
<Gallery
pages={archive.pages}
on:open={(e) => ($reader = $reader.open(e.detail))}
on:cover={updateCover}
/>
</main>
</Grid>
{:else}
<Guard {result} />
{/if}
<Reader>
<PageView layout={Layout.Single} direction={Direction.LeftToRight} />
</Reader>